﻿<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="Cache-Control" content="no-transform">
<meta http-equiv="Cache-Control" content="no-siteapp">
<meta name="applicable-device" content="mobile">
<meta name="applicable-device" content="mobile">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="format-detection" content="telephone=no">
<meta name="x5-fullscreen" content="true">
<meta name="x5-orientation" content="portrait">
<meta name="x5-page-mode" content="app">
<meta name="full-screen" content="yes">
<meta name="screen-orientation" content="portrait">
<meta name="browsermode" content="application">
<title>法币交易 3.5 测试</title>
<link href="css/index.css" type="text/css" rel="stylesheet">
<link href="css/info.css" type="text/css" rel="stylesheet">



<style>
</style>
</head>

<body>
<div class="wap-wrap hides"  id="page" v-cloak>
    <van-nav-bar :title="name"  @click-left="onClickLeft" :left-arrow='showArrow' >
        <template slot="right" v-if='mainShow == 1 || mainShow == 4'>
            <van-icon name="orders-o" @click='openOrderList()' size='22'></van-icon>
        </template>
    </van-nav-bar>
    <transition-group :name="fade" mode="out-in" class='p-box' >
        <div class="p-top" id="is-mounted"  v-if='mainShow == 1' key="page1" style="background:#FFF; padding-bottom: 240px; " >
            <div class='mainTop'>
                <div class='tradeType'>
                    <div class='active' @click='ChangedirectionType(1)'>我要买币</div>
                    <div @click='ChangedirectionType(2)'>我要卖币</div>
                </div>
            </div>
            <van-tabs v-model="coinName">
                <van-tab title="USDT" name="USDT"></van-tab>
                <van-tab title="APT" name="APT"></van-tab>
            </van-tabs>
            <div class='input' v-if='tradeType == 1'>
                <span style='color:#FFFFFF'>¥</span>
                <span style='float:right;'>{{coinName}}</span>
                <van-field class='input_text' readonly clickable :value="value"  @touchstart.native.stop="numberShow = true" :placeholder="'请输入'+placeholder+'数量'"></van-field>
            </div>
            <div class='input' v-if='tradeType == 2'>
                <span>¥</span>
                <van-field class='input_text' readonly clickable :value="value" @touchstart.native.stop="numberShow = true" :placeholder="'请输入'+placeholder+'金额'"></van-field>
            </div>
            <div class='changeTradeType' >
                <transition-group name="fadeInOut" mode="out-in"  >
                    <p v-if='tradeType == 1' key="type2" @click='ChangeTradeType(2) '><img src='./images/change.png' >按金额{{placeholder}}</p>
                    <p v-if='tradeType == 2' key="type1" @click='ChangeTradeType(1) '><img src='./images/change.png' >按数量{{placeholder}}</p>
                </transition-group>
            </div>
            <div class='buytips'>
                <p><b>OTC买卖注意事项</b></p>
                <p>1.单笔交易范围：支付宝100-30000CNY，银行卡100-50000CNY，暂不支持微信；</p>
                <p>2.全天无上限，可以多笔支付；</p>
                <p>3.提交订单之后，请在15分钟内完成付款，过时订单将超时，若上一笔订单不完成或取消将无法进行下一笔订单支付，避免重复支付；</p>
                <p>4.付款金额必须与订单金额完全一致，因用户擅自修改订单金额导致不能到账，请及时联系客服，否则将无法保证到账时间；</p>
                <p>5.不支持信用卡及第三方支付，请使用支付宝或者银行卡进行支付；</p>
                <p>6.OTC出售，收款后请及时在页面确认，否则将影响您的后续交易；</p>
                <p>7.如遇无法到账或其他问题，请及时联系客服处理。</p>
            </div>
            <div>
                <!-- 键盘 -->
                <van-number-keyboard title='安全键盘'  class='keyboard' :show="numberShow" @input="onClickInputKeyBoard"
                @delete="onDeleteKeyBoard" theme="custom" v-model="number"  extra-key="." :close-button-text="'确认'+placeholder" :hide-on-click-outside='false' @close="gopayFirst()" :safe-area-inset-bottom="true" ></van-number-keyboard>
            </div>
            <div>
                <!-- 选择支付方式 -->
                <van-action-sheet description="请选择交易方式" class='payways' v-model="alertShow" cancel-text="取消"  :close-on-click-overlay='false' @cancel="onActionCancel" :safe-area-inset-bottom="true" >
                <div class="content"> 
                    <button type="button" @click='gopay("0022")' class="van-action-sheet__item van-hairline--top">
                        <span class="van-action-sheet__icon"><img src='./images/alipay.png' /></span>
                        <span class="van-action-sheet__name">支付宝自动到账</span>
                    </button>
                    <button type="button" @click='gopay("0012")' class="van-action-sheet__item van-hairline--top">
                        <span class="van-action-sheet__icon"><img src='./images/alipay.png' /></span>
                        <span class="van-action-sheet__name">支付宝钉钉</span>
                    </button>
                    <button type="button"  disabled class="van-action-sheet__item van-action-sheet__item--disabled van-hairline--top" >
                        <span class="van-action-sheet__icon"><img src='./images/weixin.png' /></span>
                        <span class="van-action-sheet__name">微信</span>
                        <span class="van-action-sheet__subname">暂未开放</span>
                    </button>
                    <button type="button" @click='gopay("0023")'  class="van-action-sheet__item van-hairline--top">
                        <span class="van-action-sheet__icon"><img src='./images/card.png' /></span>
                        <span class="van-action-sheet__name">银行卡</span>
                        <span class="van-action-sheet__subname">单价最优</span>
                    </button>
                    <button type="button" disabled @click='gopay("0025")'  class="van-action-sheet__item van-action-sheet__item--disabled van-hairline--top">
                        <span class="van-action-sheet__icon"><img src='./images/card.png' /></span>
                        <span class="van-action-sheet__name">云闪付</span>
                        <span class="van-action-sheet__subname">暂未开放</span>
                    </button>

                </div>
                </van-action-sheet>
                    <!-- 卖单展示 -->
                <van-dialog v-model="sellPreShow" title="参考成交价格" show-cancel-button :before-close='baroreSell' @confirm = 'goReSell' >
          
                    <van-cell-group class='sellBox' style=' margin: 10px 0;'> 
                        <van-cell title="参考单价" :value="sellPreData.unitPrice+' CNY'"></van-cell>
                        <van-cell title="参考总价" :value="sellPreData.totalPrice+' CNY'"></van-cell>
                        <van-cell title="出售数量" :value="sellPreData.matchAmount+' '+coinName"></van-cell>
                        <van-cell title="交易方式" v-if='sellPreData.methodCode == "0001"'><img src='./images/alipay.png' />支付宝</van-cell>
                        <van-cell title="交易方式" v-if='sellPreData.methodCode == "0002"'><img src='./images/weixin.png' />微信</van-cell>
                        <van-cell title="交易方式" v-if='sellPreData.methodCode == "0003"'><img src='./images/card.png' />银行卡</van-cell>
                        <van-cell  title="交易方式" v-if='sellPreData.methodCode == "0004"'><img src='./images/card.png' />云闪付</van-cell>
                    </van-cell-group>
                </van-dialog>
            </div> 
        </div>
        <!--  -->
        <div class="p-top" id="is-mounted"  v-if='mainShow == 2' key="page2" >
            <div class='mainTop'>
                <dl class='payItem '>
                    <dd v-if='tradeType == 1'>{{sellPreData.matchAmount}}{{coinName}}</dd>
                    <dd v-if='tradeType == 2' style='line-height:0.4rem'>{{sellPreData.totalPrice}}{{currencyName}} <br><span style='font-size:12px'>参考数量：{{sellPreData.matchAmount}}{{coinName}}</span></dd>
                    <van-divider  :style="{ color: '#92B3FF', borderColor: '#92B3FF', padding: '0 16px' }">出售 <span v-if='tradeType == 1'>数量</span> <span v-if='tradeType == 2'>金额</span> </van-divider>
                </dl>
            </div>
            <van-form @submit="onGoSell" class='sellBox'>
                <van-cell title="交易方式" v-if='sellPreData.methodCode == "0001"'><img src='./images/alipay.png' />支付宝</van-cell>
                <van-cell title="交易方式" v-if='sellPreData.methodCode == "0002"'><img src='./images/weixin.png' />微信</van-cell>
                <van-cell title="交易方式" v-if='sellPreData.methodCode == "0003"'><img src='./images/card.png' />银行卡</van-cell>
                <van-field v-if ='sellPreData.methodCode == "0001"' type="digit" v-model="paymentDetailDto.account" label="收款账号" placeholder="支付宝收款账号" :rules="[{ required: true, message: '请填写支付宝收款账号' }]" ></van-field>
                <van-field v-if ='sellPreData.methodCode == "0003"' type="digit" v-model="paymentDetailDto.account" label="银行卡卡号" placeholder="银行卡卡号" :rules="[{ required: true, message: '请填写银行卡卡号' }]" ></van-field>
                <van-cell title=" " v-if='sellPreData.methodCode == "0003" && paymentDetailDto.account!==""' class='cardNum'> <span>{{paymentDetailDto.account | re4}}</span></van-cell>
                
                <van-field v-model="paymentDetailDto.reallyName" label="真实姓名" placeholder="用于买家确认付款信息" :rules="[{ required: true, message: '请填写真实姓名' }]" ></van-field>
                <van-field v-model="paymentDetailDto.mobile" label="手机号" type="tel" placeholder="用于短信接收" :rules="[{ required: true, message: '请填写手机号' }]" ></van-field>
                <van-field v-model="paymentDetailDto.bankBranch" v-if ='sellPreData.methodCode == "0003"' label="分行名称" placeholder="分行名称" :rules="[{ required: true, message: '请填写分行名称' }]" ></van-field>
                <div style="margin: 16px;">
                    <van-button block type="info" native-type="submit">确认卖币</van-button>
                </div>
                <div class='sellTips'>
                    <p>收款账号或银行卡卡号请多次确认</p>
                    <p v-if ='sellPreData.paymentMethodCode == "0001"'>支付宝收款账号与手机号即使相同也需要填写</p>
                    <p v-if ='sellPreData.paymentMethodCode == "0003"'>分行名称请填写银行卡开户行</p>
                </div>
            </van-form>
            <div class='panel'>
                <van-cell-group class='sellBox'>
                    <van-cell title="参考单价" :value="sellPreData.unitPrice+' CNY'"></van-cell>
                    <van-cell title="出售数量" :value="sellPreData.matchAmount+' '+coinName"></van-cell>
                    <van-cell title="参考总价" :value="sellPreData.totalPrice+' CNY'"></van-cell>
                    <van-cell title="交易方式" v-if='sellPreData.methodCode == "0001"'><img src='./images/alipay.png' />支付宝</van-cell>
                    <van-cell title="交易方式" v-if='sellPreData.methodCode == "0002"'><img src='./images/weixin.png' />微信</van-cell>
                    <van-cell title="交易方式" v-if='sellPreData.methodCode == "0003"'><img src='./images/card.png' />银行卡</van-cell>
                    <van-cell  title="交易方式" v-if='sellPreData.methodCode == "0004"'><img src='./images/card.png' />云闪付</van-cell>
                </van-cell-group>
            </div>
         
        </div>
        <!-- buy success -->
        <div class="p-top" id="is-mounted"  v-if='mainShow == 3' key="page3" >
            <div class='mainTop'>
                <dl class='payItem '>
                    <dd>{{resultData.totalPrice}}<span v-if='tradeType==2'>CNY</span></dd>
                    <van-divider  :style="{ color: '#92B3FF', borderColor: '#92B3FF', padding: '0 16px' }">实付金额</van-divider>
                </dl>
            </div>
            <div class='panel'>
                <van-cell-group>
                    <van-cell v-if='resultData.paymentMethodCode == 0001' title="付款方式" value="支付宝"></van-cell>
                    <van-cell v-if='resultData.paymentMethodCode == 0002' title="付款方式" value="微信"></van-cell>
                    <van-cell v-if='resultData.paymentMethodCode == 0003' title="付款方式" value="银行卡"></van-cell>
                    <van-cell title="单价" :value="resultData.unitPrice+' CNY'"></van-cell>
                    <van-cell title="数量" :value="resultData.orderAmount+' '+coinName"></van-cell>
                    <van-cell title="实际手续费" v-if='resultData.afterDiscountFeeAmount !== "0.00000000"' :value="resultData.afterDiscountFeeAmount+ coinName"></van-cell>
                    <van-cell title="手续费原价" v-if='resultData.showFeeAmount !== "0.00000000"' :value="resultData.showFeeAmount+ coinName"></van-cell>
                    <van-cell title="承兑商" :value="resultData.acceptanceName"></van-cell>
                </van-cell-group>
            </div>
            <div class='buttonBox'> 
                <!-- <van-count-down :time="time" format="mm:ss"></van-count-down>   :replace='true'-->
                <a target='_blank'  @click='gopay3' :href="URL">前往支付</a>
                <!-- <a type="primary"  color="#2D53E8" block @click='gopay3'  target='_blank' :url="URL">前往支付</van-button> -->
            </div>
        </div>
        <!-- sell success -->
        <div class="p-top" id="is-mounted"  v-if='mainShow == 4' key="page4" >
            <div class='mainTop'>
                <dl class='payItem '>
                    <dd>{{value}}{{coinName}}</dd>
                    <van-divider  :style="{ color: '#92B3FF', borderColor: '#92B3FF', padding: '0 16px' }">出售数量</van-divider>
                </dl>
            </div> 
            <div class='panel'>
                <van-cell-group class='sellBox'>
                    <van-cell title="交易方式" v-if='orderData.methodCode == "0001"'><img src='./images/alipay.png' />支付宝</van-cell>
                    <van-cell title="交易方式" v-if='orderData.methodCode == "0002"'><img src='./images/weixin.png' />微信</van-cell>
                    <van-cell title="交易方式" v-if='orderData.methodCode == "0003"'><img src='./images/card.png' />银行卡</van-cell>
                    <van-cell title="单价" :value="orderData.unitPrice+' CNY'"></van-cell>
                    <van-cell title="出售数量" :value="orderData.sellAmount+' '+orderData.coinName"></van-cell>
                    <van-cell title="总价" :value="orderData.totalPrice+' CNY'"></van-cell>
                    <van-cell v-if ='orderData.methodCode == "0001"'  title="收款账号" placeholder="支付宝收款账号" >{{orderData.account}}</van-cell>
                    <van-cell v-if ='sellPreData.methodCode == "0003"'  title="银行卡卡号" placeholder="银行卡卡号" >{{orderData.account}}</van-cell>
                    <van-cell title="真实姓名" >{{orderData.reallyName}}</van-cell>
                    <van-cell title="手机号"  >{{orderData.mobile}}</van-cell>
                    <van-cell v-if ='sellPreData.methodCode == "0003"' title="分行名称" >{{orderData.bankBranch}}</van-cell>
                    
                   
                </van-cell-group>
            </div>
            <div class='sellTips'>
                <p>未收到打款请不要点击放币，否则后果自负</p>
                <p>长时间未收到款项请联系平台客服</p>
            </div>
            <div class='buttonBox'> 
                <van-button class='sellbtn' v-if='orderData.status == 0' block type="info" @click='sellFinish(orderData)' native-type="submit">我已收到款确认放币</van-button>
            </div>
        </div>
        <!-- orderList -->
        <div class="p-top" id="is-mounted"  v-if='mainShow == 5' key="page5" >
            <div class='mainTop'>
                <dl class='payItem '>
                    <dd>订单列表</dd>
                </dl>
            </div>
            <div v-if='order == ""'>
                 <p style='text-align: center; color: #3D60E8; font-size: 16px; line-height: 5em;'>暂无卖单</p> 
                
            </div>
            <div class='orderPanel' v-for='(item,index) in order'>
                <van-cell-group class='sellBox'>
                    <van-cell title="订单状态" @click=''>
                        <strong v-if='item.status == 0' style='color:#EE0A24'>未完成</strong>
                        <span v-else-if='item.status == 1'>已完成</span>
                        <span v-else>未知</span>
                    </van-cell>
                    <div class='orderdetials'>
                        <p><label>订单号：</label><span>{{item.merchantOrderCode}}</span> </p>
                        <p><label>交易金额：</label><span>{{item.totalPrice}} {{item.currencyName}}</span> </p>
                        <p><label>交易单价：</label><span>{{item.unitPrice}} {{item.currencyName}}</span> </p>
                        <p><label>交易数量：</label><span>{{item.sellAmount}} {{item.coinName}}</span> </p>
                        <p><label>交易方式：</label>
                            <span v-if='item.methodCode == "0001"'><img src='./images/alipay.png' />支付宝</span>
                            <span v-if='item.methodCode == "0003"'><img src='./images/card.png' />银行卡</span>
                        </p>
                        <p><label>收款账号：</label><span>{{item.account}}</span> </p>
                       <van-button class='sellbtn' v-if='item.status == 0' block type="info" @click='sellFinish(item)' native-type="submit">{{item.merchantOrderCode}}<br>我已收到款确认放币</van-button>
                           
                    </div>
                </van-cell-group>
            </div>
            
        </div>
    </transition-group>
</div>

<script src="js/jquery-1.11.3.min.js"></script>
<script src="js/vue.js"></script>
<script src="js/vant.min.js"></script>
<script src="js/touch-emulator.js"></script>
<script src="js/jsrsasign-all-min.js"></script>
<script src="js/newpay.js"></script> 




</body>
</html>
